<script setup>
	import { ref } from 'vue'
	// 交通违章
	import slVehicleViolation from './components/vehicle-violation'
	import slVehicleBreakdown from './components/vehicle-breakdown'
	import slVehicleAccident from './components/vehicle-accident'
	import { onLoad } from '@dcloudio/uni-app'
	import { useTaskStore } from '@/stores/task'
	import { recordApi } from '@/apis/task'
	const taskStore = useTaskStore()
	// 回车时间
	// const endTime = ref('')
	// 获取地址参数
	onLoad((query) => {
		// 任务ID
		taskStore.recordData.id = query.transportTaskId
		// 出车时间
		taskStore.recordData.startTime = query.actualDepartureTime
	})

	// 提交回车登记
	async function onFormSubmit() {
		// 过滤掉图片多余的数据，只保留 url
		const { accidentImagesList, faultImagesList } = taskStore.recordData
		// 事故照片
		taskStore.recordData.accidentImagesList = accidentImagesList.map(({ url }) => {
			return { url }
		})
		// 故障照片
		taskStore.recordData.faultImagesList = faultImagesList.map(({ url }) => {
			return { url }
		})

		// 调用接口提交数据
		const { code } = await recordApi(taskStore.recordData)
		// 检测接口否调用成功
		if (code === 200) {
			// 跳转到任务列表
			uni.reLaunch({ url: '/pages/task/index' })
		}
	}
</script>
<template>
	<view class="page-container">
		<scroll-view class="scroll-view" scroll-y>
			<view class="scroll-view-wrapper">
				<uni-list class="base-info">
					<uni-list-item title="出车时间" show-arrow :right-text="taskStore.recordData.startTime" />
					<uni-list-item show-arrow title="回车时间">
						<template v-slot:footer>
							<uni-datetime-picker v-model="taskStore.recordData.endTime">
								<view class="picker-value">{{
                  taskStore.recordData.endTime || '请选择'
                }}</view>
							</uni-datetime-picker>
						</template>
					</uni-list-item>
				</uni-list>
				<sl-vehicle-violation></sl-vehicle-violation>
				<sl-vehicle-breakdown></sl-vehicle-breakdown>
				<sl-vehicle-accident></sl-vehicle-accident>
			</view>
		</scroll-view>
		<view class="toolbar">
			<button @click="onFormSubmit" class="button">提交登记</button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>